<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrap {
				position: relative;
				margin: 0 auto;
				padding: 40px 0 0 0;
				width: 500px;
				height: 460px;
				overflow: hidden;
			}
			
			.wrap img {
				position: relative;
				top: 1px;
				width: 500px;
				height: 420px;
			}
			
			.wrap p {
				position: absolute;
				margin: 0;
				z-index: 1;
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: aqua;
			}
			
			.wrap #imgs {
				position: relative;
				top: 0;
			}
			
			.wrap #top {
				top: 0;
			}
			
			.wrap #bottom {
				bottom: 0;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<p id="top">
				向上
			</p>
			<div id="imgs">
				<img src="img/scroll1.png" />
				<img src="img/scroll2.png" />
				<img src="img/scroll3.png" />
			</div>
			<p id="bottom">
				向下
			</p>
		</div>
	</body>
	<script type="text/javascript">
		var oImg = document.getElementById("imgs");
		var oP = document.getElementsByTagName("p");
		var number = oImg.style.top;
		
		//避免污染环境
		(function(){
			(function() {
			number ? number : number = 0;
		})();
		 
		//做向上移动功能
		for(var i = 0; i < oP.length; i++) {
			(function(index) {
				var Time = null;
				oP[index].onmousedown = function() {
					Time = index ? setInterval(pre, 0) : setInterval(next, 0);
				}
				oP[index].onmouseup = function() {
					clearTimeout(Time);
				}
			})(i)
		}

		function next() {
			number += 3;
			set();
			oImg.style.top = number + "px";
		}

		function pre() {
			number -= 3;
			set();
			oImg.style.top = number + "px";
		}

		function set() {
			if(number < -840) {
				number = -840;
				console.log("到底了")
			}
			if(number >= 0) {
				number = 0;
				console.log("到顶了")
			}
		}
		})();
		
	</script>

</html>